<template>
  <div>
    <el-container>
      <el-header>
        <div>
          <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark">查看监控视频</div></el-col>
          </el-row>
          <el-row>
            <el-button type="primary">查询</el-button>
          </el-row>

        </div>
      </el-header>
      <el-main>
        <div id="container" />
        <div>
          <el-input v-model="flvUrl" placeholder="输入flv视频流地址" style="margin-bottom:30px;" />
          <el-button type="primary" @click="flvPlay">播放</el-button>
          <el-button type="primary" @click="player.pause()">暂停</el-button>
          <el-button type="primary" @click="player.fullScreen()">全屏</el-button>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import EzuikitFlv from 'ezuikit-flv'
export default {
  data() {
    return {
      flvUrl: '',
      player: null
    }
  },
  mounted() {},
  created() {},
  methods: {
    createPlayer() {
      this.player = new EzuikitFlv({
        container: document.getElementById('container'),
        url: this.flvUrl,
        useMSE: true,
        decoder: 'decoder.js' // 软解解码资源 （wasm 要和js 在同一个文件夹中）
      })
    },
    flvPlay() {
      if (this.player) {
        this.player.destroy()
        this.player = null
      }
      this.createPlayer()
      this.player.play()
    }
  }
}
</script>
<style>
#container {
  width: 600px;
  height: 400px;
  background: #000;
}
</style>
